<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>todo</title>
  <script src="/js/inc.js"></script>
  <script src="/js/axios.min.js"></script>
  <script src="/js/vue.min.js"></script>
  <script src="/js/element-ui.index.js"></script>
  <link rel="stylesheet" href="/css/element-ui.index.css">
  <link rel="stylesheet" href="/css/style.css">

</head>

<body>
  <div id="app">
    <div id="todo-list-example">
      <form @submit.prevent="addNewTodo">
        <label for="new-todo">Add a todo</label>
        <input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat">
        <button>Add</button>
      </form>
      <ul>
        <todo-item v-for="(todo, index) in todos" :key="todo.id" :to="todo"
          @remove="todos.splice(index, 1)"></todo-item>
        <!-- 此处父组件监听remove事件,当收到子组件处罚的remove时间时执行js代码 -->
        <!-- 上方绑定todo到 todo-item组件的 to, to跟props['to']一致对应 -->
      </ul>
    </div>

  </div>
</body>

<script>
  Vue.component('todo-item', {
    template: `
    <li>
      {{ to.id }} : {{ to.title }}
      <button @click="$emit('remove')">Remove</button>
    </li>`,
    //上方 @click="$emit('remove')" 意为点击按钮时触发remove事件
    props: ['to']
  })

  let app = new Vue({
    el: '#todo-list-example',
    data: {
      newTodoText: '',
      todos: [
        {
          id: 1,
          title: 'Do the dishes',
        },
        {
          id: 2,
          title: 'Take out the trash',
        },
        {
          id: 3,
          title: 'Mow the lawn'
        }
      ],
      nextTodoId: 4
    },
    methods: {
      addNewTodo() {
        console.log(this.newTodoText)
        this.todos.push({
          id: this.nextTodoId++,
          title: this.newTodoText
        })
        this.newTodoText = ''
      }
    }
  })
</script>

</html>
